<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .game_con_wrap {
        width: 100%;
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="loading" id="loading"
        style="transform: rotate(0deg) scale(0.5) translate3d(0px, 0px, 0px); width: 1624px; height: 750px; opacity: 0; display: none;">
        <div class="loading_main">
            <img src="https://g.mdcdn.cn/h5/img/act/201711/loading.gif" alt="">
            <div class="percent" id="percent">100%</div>
        </div>
    
    </div>
    <div class="game_con_wrap"></div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
    <script src="./js/Animate.js"></script>
    <script src="./js/Scroller.js"></script>
    <script>
        let TextureCache = PIXI.utils.TextureCache,
            loader = PIXI.loader,
            Sprite = PIXI.Sprite,
            resources = PIXI.loader.resources,
            Application = PIXI.Application;

        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;
        
        //创建渲染器，宽高为视窗的宽高
        // var pixiRender = new PIXI.autoDetectRenderer(windowWidth, windowHeight);
        var pixiRender = new Application({ width: windowWidth, height: windowHeight })

        //把渲染器添加到HTML结构里
        $(".game_con_wrap")[0].appendChild(pixiRender.view);

        //创建一个容器对象：舞台
        var objPixiContainer = new PIXI.Container();

        //告诉渲染器去渲染舞台
        // pixiRender.render(objPixiContainer);
        pixiRender.stage.addChild(objPixiContainer);

        var urlPadding = "https://g.mdcdn.cn/h5/img/act/201711/",
            act_1_animate_bg_img_arr = []
            act_1_brids = [];
        for (let cIndex = 0; cIndex < 11; cIndex++) {
            act_1_animate_bg_img_arr.push(urlPadding + "new-1-sky-" + (cIndex + 1) + ".jpg");
        }
        for (let cIndex = 0; cIndex < 21; cIndex++) {
                act_1_brids.push(urlPadding + "new-1-bird-" + (cIndex + 1) + ".png");
            }

        //图片预加载
        PIXI.loader
            .add("https://g.mdcdn.cn/h5/img/act/201711/new-1-1.jpg")
            .add("https://g.mdcdn.cn/h5/img/act/201711/new-1-2.png")
            .add("https://g.mdcdn.cn/h5/img/act/201711/new-1-3.png")
            .add(act_1_animate_bg_img_arr)
            .add(act_1_brids)
            .on("progress", function () {
                //do sth when loading
            })
            .load(loadingFinish);

        //加载完成回调
        function loadingFinish() {
            //创建一个精灵
            var sprite = new PIXI.Sprite(
                PIXI.loader.resources["https://g.mdcdn.cn/h5/img/act/201711/new-1-1.jpg"].texture
            );
            //添加到舞台
            objPixiContainer.addChild(sprite)
            //精灵：背景图层4
            var sprite4 = new PIXI.extras.AnimatedSprite.fromImages(act_1_animate_bg_img_arr)
            objPixiContainer.addChild(sprite4)
            //场景1：云
            sprite4.visible = true;
            // Act_1.children[0].gotoAndStop(xFrame); 移动到某个位置后 开始播放动画
            sprite4.animationSpeed = 0.1;
            sprite4.play();

            var sprite2 = new PIXI.Sprite(
                PIXI.loader.resources["https://g.mdcdn.cn/h5/img/act/201711/new-1-2.png"].texture
            );
            sprite2.position.set(290, 297)
            objPixiContainer.addChild(sprite2)
            
            var sprite3 = new PIXI.Sprite(
                PIXI.loader.resources["https://g.mdcdn.cn/h5/img/act/201711/new-1-3.png"].texture
            );
            sprite3.position.set(-200, 0)
            objPixiContainer.addChild(sprite3)

            // 乌鸦
            var sprite5 = new PIXI.extras.AnimatedSprite.fromImages(act_1_brids)
            sprite5.position.set(130, 200)
            objPixiContainer.addChild(sprite5)
            //场景1：云
            // sprite5.visible = true;
            // Act_1.children[0].gotoAndStop(xFrame); 移动到某个位置后 开始播放动画
            sprite5.animationSpeed = 0.1;
            sprite5.play();

            var scriptText_con;
            objPixiContainer.removeChild(scriptText_con);
            scriptText_con = new PIXI.Container();
            scriptText_con.position.set(0, 628);
            
            var textSample = new PIXI.Text("老板大人", { fontSize: '22px', fill: 'white', align: 'center' });
            scriptText_con.addChild(textSample);
            objPixiContainer.addChild(scriptText_con);
            //渲染到渲染器
            // pixiRender.render(objPixiContainer);
            // pixiRender.stage.addChild(objPixiContainer);
        }
        $(window).resize(function () {
            pixiRender.renderer.resize(window.innerWidth, window.innerHeight);
            // pixiRender.resize(window.innerWidth, window.innerHeight)
        });
        //控制位移
        function scrollerCallback(left, top, zoom) {
            console.log(`当前滚动条位置:${left},${top}`)
            var cur_Y, cur_X;
            // if (GlobalRotation > 0) {
            //     cur_X = top;
            //     cur_Y = left;
            // } else {
            //     cur_X = left;
            //     cur_Y = top;
            // }
            if(x > 500) {
                
            }
            objPixiContainer.position.set(-left, top);
            //todo 位移距离对应在哪个具体场景
            if (cur_X > 950) {
                //第一个场景内 执行动画
            } 
            // else if () {

            // }

            //当前场景相对移动
            // stageContainer.position.x = -cur_X;
            // stageContainer.position.y = -cur_Y;
        }
        var objScroller = new Scroller(scrollerCallback, {
            zooming: false,
            animating: true,
            bouncing: false,
            scrollingY: false,
            animationDuration: 1000
        });
        // objScroller.__enableScrollY = false;
        var scrollX = 2000;//视具体视觉效果而定
        objScroller.setDimensions(windowWidth, windowHeight, scrollX + windowWidth, windowHeight);
        let isTouching;
        $(document).on("touchstart", onTouchStart)
                .on("touchmove", onTouchMove)
                .on("touchend", onTouchEnd);

            function onTouchStart(e) {
                console.log(e)
                //        start_stage_con.visible = false;
                // var i = e.data.originalEvent;
                var i = e.originalEvent;
                isTouching = true;
                objScroller.doTouchStart(i.touches, i.timeStamp);
            }

            function onTouchMove(e) {
                if (isTouching) {
                    // var i = e.data.originalEvent;
                    var i = e.originalEvent;
                    objScroller.doTouchMove(i.touches, i.timeStamp, i.scale);
                }
            }

            function onTouchEnd(e) {
                // var i = e.data.originalEvent;
                var i = e.originalEvent;
                objScroller.doTouchEnd(i.timeStamp);
                isTouching = false;
            }
    </script>
</body>
</html>